<template>
  <div>
    <!--  添加  -->
    <el-form ref="create" :rules="rules" :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="客户姓名" prop="user">
        <el-input v-model="formInline.user" placeholder="客户姓名"></el-input>
      </el-form-item>
      <el-form-item label="客户年龄" prop="age">
        <el-input v-model="formInline.age" placeholder="客户年龄"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="createData('create')">添加</el-button>
      </el-form-item>
    </el-form>
    <!--  数据展示  -->
    <el-table
      :data="tableData.slice(5*(this.currentPage-1),(5*this.currentPage))"
      height="270"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="300">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="300">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="300">
      </el-table-column>
    </el-table>
    <!--    分页-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :pager-count="5"
      :page-size="5"
      layout="total, prev, pager, next"
      :total="this.tableData.length">
    </el-pagination>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisibleNull"
      width="30%"
      :before-close="handleClose">
      <span>请输入姓名和年龄</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleNull = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name:"createUser",
  created() {
    this.getData()
  },
  data() {
    return {
      formInline: {
        user: '',
        age: '',
      },
      tableData: [],
      searchTableData:[],

      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        user: [
          {required: true, message: '不可为空', trigger: 'blur'}
        ],
        age: [
          {required: true, message: '不可为空', trigger: 'blur'}
        ]
      },
      // 对话框显示和隐藏
      dialogVisibleNull: false,
      //分页
      currentPage:"",
    }
  },
  methods:{
    async getData(){
      var _this=this;
      await this.axios({
        method:"get",
        url:"http://192.168.1.3:8080/getData",
      }).then(function (response){
        response.data.forEach((item) => {
          _this.tableData.push({
            id: item.id,
            name: item.name,
            age: item.age,
          })
          _this.searchTableData=_this.tableData;
        });
      });
    },
    async createData(formName){
      // 为表单绑定验证功能
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.$confirm('确定要添加吗?', '信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            var _this = this;
            await this.axios({
              method: "post",
              url: "http://192.168.1.3:8080/addData",
              data: {
                name: _this.formInline.user,
                age: _this.formInline.age,
              },
            }).then(function (response) {
              if(response.data=="Ok"){
                _this.$message.success("创建成功")
              }else {
                _this.$message.error("创建失败")
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消添加'
            })
          })

          this.tableData = [];
          this.searchTableData = [];
          await this.getData();
        } else {
          this.dialogVisibleNull = true;
          return false;
        }
      });
    },
    //分页
    handleSizeChange(){
    },
    handleCurrentChange(){
    },
  },
}
</script>

